<script setup>
import { ref, defineModel, watch, onMounted } from 'vue'
const model = defineModel({
  type: Boolean,
  default: false
})
const columnOption = defineModel('columnOption', {
  type: Array,
  default: () => []
})
const alignList = ref([
  { value: 'left', label: '左对齐' },
  { value: 'center', label: '居中' },
  { value: 'right', label: '右对齐' }
])
const tableData = ref([])
const rawData = ref([])
const currIndex = ref(null)

onMounted(() => {
  dataChange(columnOption.value)
})

watch(columnOption, (newValue) => {
  dataChange(newValue)
})

const dataChange = (newValue) => {
  rawData.value = newValue.map((e, i) => {
    const tableRow = JSON.parse(JSON.stringify(e))
    return tableRow
  })
  tableData.value = newValue.map((e, i) => {
    const tableRow = JSON.parse(JSON.stringify(e))
    return tableRow
  })
}

const sure = () => {
  const tableDataTemp = [...tableData.value].map(e => {
    e = JSON.parse(JSON.stringify(e))
    delete e.index
    return e
  })
  columnOption.value = tableDataTemp
  model.value = false
}
const reset = () => {
  currIndex.value = null
  tableData.value = rawData.value.map(e => {
    const tableRow = JSON.parse(JSON.stringify(e))
    return tableRow
  })
}
const move = (type) => {
  const index = currIndex.value
  switch (type) {
    case 'top':
      if (index !== 0) {
        tableData.value.unshift(tableData.value.splice(index, 1)[0])
        currIndex.value = 0
      }
      break
    case 'up':
      if (index !== 0) {
        tableData.value[index] = tableData.value.splice(index - 1, 1, tableData.value[index])[0]
        currIndex.value = currIndex.value - 1
      } else {
        tableData.value.push(tableData.value.shift())
        currIndex.value = tableData.value.length - 1
      }
      break
    case 'down':
      if (index !== tableData.value.length - 1) {
        tableData.value[index] = tableData.value.splice(index + 1, 1, tableData.value[index])[0]
        currIndex.value = currIndex.value + 1
      } else {
        tableData.value.unshift(tableData.value.splice(index, 1)[0])
        currIndex.value = 0
      }
      break
    case 'lowest':
      if (index !== tableData.value.length - 1) {
        tableData.value.push(tableData.value.splice(index, 1)[0])
        currIndex.value = tableData.value.length - 1
      }
      break
    default:
      break
  }
}
/* 表格方法 */
// 高亮行改变
const handleCurrentChange = (currentRow) => {
  if (currentRow && currentRow.index !== null) {
    currIndex.value = currentRow.index
  }
}
// 当前行index
const tableRowIndex = ({ row, rowIndex }) => {
  row.index = rowIndex
}
</script>

<template>
  <el-dialog
    v-model="model"
    v-bind="$attrs"
    title="格式"
    width="560px"
  >
    <div class="format-row">
      <el-button
        type="primary"
        @click="sure"
      >
        确定
      </el-button>
      <el-button
        type="primary"
        @click="reset"
      >
        重置
      </el-button>
      <el-button
        type="primary"
        :disabled="currIndex === null"
        @click="move('top')"
      >
        最上
      </el-button>
      <el-button
        type="primary"
        :disabled="currIndex === null"
        @click="move('up')"
      >
        上移
      </el-button>
      <el-button
        type="primary"
        :disabled="currIndex === null"
        @click="move('down')"
      >
        下移
      </el-button>
      <el-button
        type="primary"
        :disabled="currIndex === null"
        @click="move('lowest')"
      >
        最下
      </el-button>
    </div>
    <div class="format-list">
      <el-table
        :data="tableData"
        stripe
        border
        height="300"
        highlight-current-row
        :row-class-name="tableRowIndex"
        @current-change="handleCurrentChange"
      >
        <el-table-column
          align="center"
          header-align="center"
          type="index"
          width="50"
          label="序号"
        />
        <el-table-column
          align="center"
          header-align="center"
          prop="cname"
          label="名称"
          width="100"
        />
        <el-table-column
          align="center"
          header-align="center"
          prop="cshow"
          label="显示"
          width="50"
        >
          <template #default="{ row }">
            <el-checkbox v-model="row.cshow" />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          header-align="center"
          prop="align"
          label="对齐方式"
          width="auto"
        >
          <template #default="{ row }">
            <el-select
              v-model="row.align"
            >
              <el-option
                v-for="item in alignList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          header-align="center"
          prop="showname"
          label="显示名称"
          width="120"
        >
          <template #default="{ row }">
            <el-input
              v-model="row.showname"
            />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          header-align="center"
          prop="clock"
          label="锁定"
          width="50"
        >
          <template #default="{ row }">
            <el-checkbox v-model="row.clock" />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<style lang="less" scoped>
.format-row{
    display: flex;
    margin-bottom: 10px;
}
.format-list{
    height: 320px;
    overflow-y: scroll;
}
</style>
